<!DOCTYPE html>
<html lang="en">
    
<!-- Mirrored from stilearning.com/items/preview/stilearn-admin-template/interface.html by HTTrack Website Copier/3.x [XR&CO'2013], Wed, 01 May 2013 03:37:35 GMT -->
<head>
        <meta charset="utf-8">
        <title>Interface - Stilearn Admin Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="stilearn admin template v1.0">
        <meta name="author" content="stilearning">

        <!-- google font -->
        <link href="http://fonts.googleapis.com/css?family=Aclonica:regular" rel="stylesheet" type="text/css" />

        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/bootstrap-responsive.css" rel="stylesheet">
        <!-- default theme -->
        <link id="style-base" href="css/stilearn.css" rel="stylesheet">
        <link id="style-responsive" href="css/stilearn-responsive.css" rel="stylesheet">
        <link id="style-helper" href="css/stilearn-helper.css" rel="stylesheet">
        <!-- usage -->
        <link href="css/stilearn-icon.css" rel="stylesheet">
        <link href="css/animate.css" rel="stylesheet">
        <link href="css/uniform.default.css" rel="stylesheet">
        <!-- other -->
        <link href="css/jquery.pnotify.default.css" rel="stylesheet">
        <link href="css/responsive-tables.css" rel="stylesheet">
        <link href="css/font-awesome.css" rel="stylesheet">
        <link href="css/picons-oxygen.css" rel="stylesheet">
        
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>
        <!-- section header -->
        <header class="header" data-spy="affix" data-offset-top="0">
            <!--nav bar helper-->
            <div class="navbar-helper">
                <div class="row-fluid">
                    <!--panel site-name-->
                    <div class="span2">
                        <div class="panel-sitename">
                            <h2><a href="index.html"><span class="color-teal">Sti</span>learn</a></h2>
                        </div>
                    </div>
                    <!--/panel name-->

                    <div class="span6">
                        <!--panel search-->
                        <div class="panel-search">
                            <form>
                                <div class="input-icon-append">
                                    <button type="submit" rel="tooltip-bottom" title="search" class="icon"><i class="icofont-search"></i></button>
                                    <input class="input-large search-query grd-white" maxlength="23" placeholder="Search here..." type="text">
                                </div>
                            </form>
                        </div><!--/panel search-->
                    </div>
                    <div class="span4">
                        <!--panel button ext-->
                        <div class="panel-ext">
                            <div class="btn-group">
                                <!--notification-->
                                <a class="btn btn-danger btn-small" data-toggle="dropdown" href="#" title="3 notification">3</a>
                                <ul class="dropdown-menu dropdown-notification">
                                    <li class="dropdown-header grd-white"><a href="#">View All Notifications</a></li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">John Doe commented on a post</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lorem ipsum <small class="helper-font-small"> john doe</small></h4>
                                                    <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Tortor dapibus</h4>
                                                    <p>Vegan fanny pack odio cillum wes anderson 8-bit.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="new">
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lacinia non</h4>
                                                    <p>Messenger bag gentrify pitchfork tattooed craft beer.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">John Doe commented on a post</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lorem ipsum <small class="helper-font-small"> john doe</small></h4>
                                                    <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Tortor dapibus</h4>
                                                    <p>Vegan fanny pack odio cillum wes anderson 8-bit.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="notification">Request new order</div>
                                            <div class="media">
                                                <img class="media-object pull-left" data-src="js/holder.js/64x64" />
                                                <div class="media-body">
                                                    <h4 class="media-heading">Lacinia non</h4>
                                                    <p>Messenger bag gentrify pitchfork tattooed craft beer.</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <!-- <li class="dropdown-footer"><a href=""></a></li> -->
                                </ul><!--notification-->
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-inverse btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                                    Shortcut
                                </a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                    <li><a tabindex="-1" href="calendar.html">Calendar</a></li>
                                    <li><a tabindex="-1" href="invoice.html">Invoice</a></li>
                                    <li><a tabindex="-1" href="message.html">Message</a></li>
                                    <li class="divider"></li>
                                    <li class="dropdown-submenu">
                                        <a tabindex="-1" href="#">Sample Page</a>
                                        <ul class="dropdown-menu">
                                            <li><a tabindex="-1" href="pricing.html">Pricing</a></li>
                                            <li><a tabindex="-1" href="bonus-page/resume/index.html">Resume</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a tabindex="-1" href="#">Error Page</a>
                                        <ul class="dropdown-menu">
                                            <li><a tabindex="-1" href="403.html">Error 403</a></li>
                                            <li><a tabindex="-1" href="404.html">Error 404</a></li>
                                            <li><a tabindex="-1" href="405.html">Error 405</a></li>
                                            <li><a tabindex="-1" href="500.html">Error 500</a></li>
                                            <li><a tabindex="-1" href="503.html">Error 503</a></li>
                                            <li><a tabindex="-1" href="under-construction.html">Under Construction</a></li>
                                            <li><a tabindex="-1" href="coming-son.html">Coming Son</a></li>
                                        </ul>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a tabindex="-1" href="#">Something else here</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <a class="btn btn-inverse btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                                    Layouts
                                </a>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                    <li><a tabindex="-1" href="layout_2columns.html">2 Columns</a></li>
                                    <li><a tabindex="-1" href="layout_grid.html">Change Grid</a></li>
                                    <li class="divider"></li>
                                    <li><a tabindex="-1" href="layout_toggleright.html">Toggle Right</a></li>
                                    <li><a tabindex="-1" href="layout_toggleright2.html">Toggle Right Alt</a></li>
                                </ul>
                            </div>
                            <div class="btn-group user-group">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <img class="corner-all" align="middle" src="img/user-thumb.jpg" title="John Doe" alt="john doe" /> <!--this for display on PC device-->
                                    <button class="btn btn-small btn-inverse">John Doe</button> <!--this for display on tablet and phone device-->
                                </a>
                                <ul class="dropdown-menu dropdown-user" role="menu" aria-labelledby="dLabel">
                                    <li>
                                        <div class="media">
                                            <a class="pull-left" href="#">
                                                <img class="img-circle" src="img/user.jpg" title="profile" alt="profile" />
                                            </a>
                                            <div class="media-body description">
                                                <p><strong>John Doe</strong></p>
                                                <p class="muted">johndoe@mail.com</p>
                                                <p class="action"><a class="link" href="#">Activity</a> - <a class="link" href="#">Setting</a></p>
                                                <a class="btn btn-primary btn-small btn-block">View Profile</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="dropdown-footer">
                                        <div>
                                            <a class="btn btn-small pull-right" href="login.html">Logout</a>
                                            <a class="btn btn-small" href="#">Add Account</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div><!--panel button ext-->
                    </div>
                </div>
            </div><!--/nav bar helper-->
        </header>

        <!-- section content -->
        <section class="section">
            <div class="row-fluid">
                <!-- span side-left -->
                <div class="span1">
                    <!--side bar-->
                    <aside class="side-left">
                        <ul class="sidebar">
                            <li>
                                <a href="index.html" title="dashboard">
                                    <div class="helper-font-24">
                                        <i class="icofont-dashboard"></i>
                                    </div>
                                    <span class="sidebar-text">Dashboard</span>
                                </a>
                            </li>
                            <li class="active">
                                <a href="interface.html" title="interface">
                                    <div class="helper-font-24">
                                        <i class="icofont-magnet"></i>
                                    </div>
                                    <span class="sidebar-text">Interface</span>
                                </a>
                            </li>
                            <li>
                                <a href="form.html" title="form">
                                    <div class="badge badge-important">3</div>
                                    <div class="helper-font-24">
                                        <i class="icofont-edit"></i>
                                    </div>
                                    <span class="sidebar-text">Form</span>
                                </a>
                                <ul class="sub-sidebar-form corner-top shadow-white">
                                    <li class="title muted">Quick Upload</li>
                                    <li>
                                        <input type="file" data-form="uniform" onchange="alert('your progres uploading file...')" />
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="form.html" title="form element" class="corner-all">
                                            <i class="icofont-file"></i>
                                            <span class="sidebar-text">Form Element</span>
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="code_editor.html" title="code editor" class="corner-all">
                                            <i class="icofont-book"></i>
                                            <span class="sidebar-text">Code Editor</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="gallery.html" title="gallery" class="corner-all">
                                            <i class="icofont-picture"></i>
                                            <span class="sidebar-text">Gallery</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="charts.html" title="charts">
                                    <div class="helper-font-24">
                                        <i class="icofont-bar-chart"></i>
                                    </div>
                                    <span class="sidebar-text">charts</span>
                                </a>
                            </li>
                            <li>
                                <a href="tables.html" title="table">
                                    <div class="helper-font-24">
                                        <i class="icofont-table"></i>
                                    </div>
                                    <span class="sidebar-text">Tables</span>
                                </a>
                            </li>
                            <li>
                                <a href="grids.html" title="grids">
                                    <div class="helper-font-24">
                                        <i class="icofont-columns"></i>
                                    </div>
                                    <span class="sidebar-text">Grids</span>
                                </a>
                            </li>
                            <li>
                                <a href="icons.html" title="icons">
                                    <div class="helper-font-24">
                                        <i class="icofont-star"></i>
                                    </div>
                                    <span class="sidebar-text">Icons</span>
                                </a>
                            </li>
                            <li>
                                <a href="widgets.html" title="widgets">
                                    <div class="helper-font-24">
                                        <i class="icofont-reorder"></i>
                                    </div>
                                    <span class="sidebar-text">Widgets</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" title="more">
                                    <div class="badge badge-important">5</div>
                                    <div class="helper-font-24">
                                        <i class="icofont-th-large"></i>
                                    </div>
                                    <span class="sidebar-text">More</span>
                                </a>
                                <ul class="sub-sidebar corner-top shadow-silver-dark">
                                    <li>
                                        <a href="404.html" title="not found">
                                            <div class="helper-font-24">
                                                <i class="icofont-warning-sign"></i>
                                            </div>
                                            <span class="sidebar-text">404</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="login.html" title="login">
                                            <div class="helper-font-24">
                                                <i class="icofont-lock"></i>
                                            </div>
                                            <span class="sidebar-text">Login</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="invoice.html" title="invoice">
                                            <div class="helper-font-24">
                                                <i class="icofont-barcode"></i>
                                            </div>
                                            <span class="sidebar-text">Invoice</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="pricing.html" title="pricing table">
                                            <div class="helper-font-24">
                                                <i class="icofont-briefcase"></i>
                                            </div>
                                            <span class="sidebar-text">Pricing</span>
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="bonus-page/resume/index.html" title="resume">
                                            <div class="helper-font-24">
                                                <i class="icofont-user"></i>
                                            </div>
                                            <span class="sidebar-text">Resume</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </aside><!--/side bar -->
                </div><!-- span side-left -->
                
                <!-- span content -->
                <div class="span9">
                    <!-- content -->
                    <div class="content">
                        <!-- content-header -->
                        <div class="content-header">
                            <ul class="content-header-action pull-right">
                                <li>
                                    <a href="#">
                                        <div class="badge-circle color-white">
                                            <div class="grd-green">
                                                <i class="icofont-flag"></i>
                                            </div>
                                        </div>
                                        <div class="action-text color-green">8765 <span class="helper-font-small color-silver-dark">Visits</span></div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div class="badge-circle color-white">
                                            <div class="grd-teal">
                                                <i class="icofont-user-md"></i>
                                            </div>
                                        </div>
                                        <div class="action-text color-teal">1437 <span class="helper-font-small color-silver-dark">Users</span></div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div class="badge-circle color-white">
                                            <div class="grd-orange">$</div>
                                        </div>
                                        <div class="action-text color-orange">4367 <span class="helper-font-small color-silver-dark">Orders</span></div>
                                    </a>
                                </li>
                            </ul>
                            <h2><i class="icofont-magic"></i> Interface elements</h2>
                        </div><!-- /content-header -->
                        
                        <!-- content-breadcrumb -->
                        <div class="content-breadcrumb">
                            <!--breadcrumb-nav-->
                            <ul class="breadcrumb-nav pull-right">
                                <li class="divider"></li>
                                <li class="btn-group">
                                    <a href="#" class="btn btn-small btn-link">
                                        <i class="icofont-money"></i> Orders <span class="color-red">(+12)</span>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li class="btn-group">
                                    <a href="#" class="btn btn-small btn-link">
                                        <i class="icofont-user"></i> Users <span class="color-red">(+34)</span>
                                    </a>
                                </li>
                            </ul><!--/breadcrumb-nav-->
                            
                            <!--breadcrumb-->
                            <ul class="breadcrumb">
                                <li><a href="index.html"><i class="icofont-home"></i> Dashboard</a> <span class="divider">&rsaquo;</span></li>
                                <li><a href="interface.html">Interface</a> <span class="divider">&rsaquo;</span></li>
                                <li class="active">Data elements</li>
                            </ul><!--/breadcrumb-->
                        </div><!-- /content-breadcrumb -->
                        
                        <!-- content-body -->
                        <div class="content-body">
                            <!-- interface -->
                            
                            <!-- =========================================
                                            ANIMATED BUTTON
                            =========================================== -->
                            <!--row-fluid-->
                            <div class="row-fluid">
                                <!--span-->
                                <div class="span12">
                                    <!--box-->
                                    <div class="box corner-all">
                                        <!--box header-->
                                        <div class="box-header grd-white color-silver-dark corner-top">
                                            <div class="header-control">
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close">&times;</a>
                                            </div>
                                            <span>Animate Shortcut Button</span>
                                        </div><!--/box header-->
                                        <!--box body-->
                                        <div class="box-body corner-bottom">
                                            <!--animate button-->
                                            <!--a-btn-->
                                            <h3>Circle a-btn</h3>
                                            <div class="shortcut-group">
                                                <ul class="a-btn-group">
                                                    <li>
                                                        <a href="#" class="a-btn" title="add new post">
                                                            <div class="grd-white">
                                                                <span></span>
                                                                <span><i class="icofont-plus color-silver-dark"></i></span>
                                                                <span class="color-silver-dark"><i class="icofont-plus-sign color-silver-dark"></i></span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn" title="upload something">
                                                            <div class="grd-white">
                                                                <span></span>
                                                                <span><i class="icofont-upload color-silver-dark"></i></span>
                                                                <span class="color-silver-dark"><i class="icofont-upload-alt color-silver-dark"></i></span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn" title="message">
                                                            <div class="grd-white">
                                                                <span></span>
                                                                <span><i class="icofont-envelope color-silver-dark"></i></span>
                                                                <span class="color-silver-dark"><i class="icofont-envelope-alt color-teal"></i></span>
                                                                <div class="badge badge-info">9</div> <!--don't use span here!-->
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn" title="invoice">
                                                            <div class="grd-white">
                                                                <span></span>
                                                                <span><i class="icofont-barcode color-silver-dark"></i></span>
                                                                <span class="color-silver-dark"><i class="icofont-shopping-cart color-red"></i></span>
                                                                <div class="label label-important">2</div> <!--don't use span here!-->
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn" title="check statistics">
                                                            <div class="grd-white">
                                                                <span></span>
                                                                <span><i class="icofont-bar-chart color-silver-dark"></i></span>
                                                                <span class="color-silver-dark"><i class="typicn-lineChart"></i></span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div><!--/a-btn-->
                                            
                                            <div class="divider-content"><span></span></div>
                                            
                                            <!--a-btn square-->
                                            <div class="shortcut-group">
                                                <ul class="a-btn-group">
                                                    <li>
                                                        <a href="#" class="a-btn square grd-white" title="add new post">
                                                            <span></span>
                                                            <span><i class="icofont-plus color-silver-dark"></i></span>
                                                            <span class="color-silver-dark"><i class="icofont-plus-sign color-silver-dark"></i></span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn square grd-white" title="upload something">
                                                            <span></span>
                                                            <span><i class="icofont-upload color-silver-dark"></i></span>
                                                            <span class="color-silver-dark"><i class="icofont-upload-alt color-silver-dark"></i></span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn square grd-white" title="message">
                                                            <span></span>
                                                            <span><i class="icofont-envelope color-silver-dark"></i></span>
                                                            <span class="color-silver-dark"><i class="icofont-envelope-alt color-teal"></i></span>
                                                            <div class="badge badge-info">9</div> <!--don't use span here!-->
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn square grd-white" title="invoice">
                                                            <span></span>
                                                            <span><i class="icofont-barcode color-silver-dark"></i></span>
                                                            <span class="color-silver-dark"><i class="icofont-shopping-cart color-red"></i></span>
                                                            <div class="label label-important">2</div> <!--don't use span here!-->
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn square grd-white" title="check statistics">
                                                            <span></span>
                                                            <span><i class="icofont-bar-chart color-silver-dark"></i></span>
                                                            <span class="color-silver-dark"><i class="typicn-lineChart"></i></span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div><!--/a-btn square-->
                                            
                                            <div class="divider-content"><span></span></div>
                                            
                                            <!--a-btn customize-->
                                            <h4>Customize & Colors</h4>
                                            <div class="shortcut-group">
                                                <ul class="a-btn-group">
                                                    <li>
                                                        <a href="#" class="a-btn" title="google plus">
                                                            <div class="grd-black">
                                                                <span></span>
                                                                <span><i class="icofont-google-plus color-white"></i></span>
                                                                <span class="color-white"><i class="icofont-google-plus-sign color-white"></i></span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn" title="vimeo">
                                                            <div class="grd-blue">
                                                                <span></span>
                                                                <span><i class="socialico-vimeo color-white"></i></span>
                                                                <span class="color-white"><i class="socialico-vimeo-sign color-white"></i></span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn" title="wordpress">
                                                            <div class="grd-green">
                                                                <span></span>
                                                                <span><i class="socialico-wordpress color-white"></i></span>
                                                                <span class="color-white"><i class="socialico-wordpress-sign color-white"></i></span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn" title="stumbleupon">
                                                            <div class="grd-orange">
                                                                <span></span>
                                                                <span><i class="socialico-stumbleupon color-white"></i></span>
                                                                <span class="color-white"><i class="socialico-stumbleupon-sign color-white"></i></span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn" title="flickr">
                                                            <div class="grd-purple">
                                                                <span></span>
                                                                <span><i class="socialico-flickr color-white"></i></span>
                                                                <span class="color-white"><i class="socialico-flickr-sign color-white"></i></span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn" title="dribbble">
                                                            <div class="grd-purple-dark">
                                                                <span></span>
                                                                <span><i class="socialico-dribbble color-white"></i></span>
                                                                <span class="color-white"><i class="socialico-dribbble-sign color-white"></i></span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn" title="youtube">
                                                            <div class="grd-purple">
                                                                <span></span>
                                                                <span><i class="socialico-youtube color-white"></i></span>
                                                                <span class="color-white"><i class="socialico-youtube-sign color-white"></i></span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn" title="facebook">
                                                            <div class="grd-sky">
                                                                <span></span>
                                                                <span><i class="socialico-facebook color-white"></i></span>
                                                                <span class="color-white"><i class="socialico-facebook-sign color-white"></i></span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn" title="linkedin">
                                                            <div class="grd-teal">
                                                                <span></span>
                                                                <span><i class="socialico-linkedin color-white"></i></span>
                                                                <span class="color-white"><i class="socialico-linkedin-sign color-white"></i></span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="a-btn" title="twitter">
                                                            <div class="grd-win8">
                                                                <span></span>
                                                                <span><i class="socialico-twitter color-white"></i></span>
                                                                <span class="color-white"><i class="socialico-twitter-sign color-white"></i></span>
                                                            </div>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div><!--/a-btn customize-->
                                            
                                            <div class="divider-content"><span></span></div>
                                            
                                            <!--b-btn-->
                                            <h3>Square b-btn</h3>
                                            <div class="shortcut-group">
                                                <ul class="b-btn-group">
                                                    <li>
                                                        <a href="#" class="b-btn grd-white">
                                                            <span class="b-btn-slide-text color-silver-dark">3243</span>
                                                            <i class="img icofont-bar-chart color-silver-dark helper-font-48"></i>
                                                            <span class="b-btn-icon-right">
                                                                <span>
                                                                    <i class="icofont-arrow-down helper-font-24 color-silver-dark"></i>
                                                                </span>
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="b-btn grd-white">
                                                            <span class="b-btn-slide-text color-silver-dark">8765</span>
                                                            <i class="img icofont-plus-sign color-silver-dark helper-font-48"></i>
                                                            <span class="b-btn-icon-right">
                                                                <span class="bg-silver-dark">
                                                                    <i class="icofont-arrow-down helper-font-24 color-silver-dark"></i>
                                                                </span>
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="b-btn grd-white">
                                                            <span class="b-btn-slide-text color-silver-dark">1437</span>
                                                            <i class="img icofont-user-md color-silver-dark helper-font-48"></i>
                                                            <span class="b-btn-icon-right">
                                                                <span>
                                                                    <i class="icofont-arrow-down helper-font-24 color-silver-dark"></i>
                                                                </span>
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="b-btn grd-white">
                                                            <span class="b-btn-slide-text color-silver-dark">$29,456</span>
                                                            <span class="img color-silver-dark helper-font-48">$</span>
                                                            <span class="b-btn-icon-right">
                                                                <span class="bg-silver">
                                                                    <i class="icofont-arrow-down helper-font-24 color-silver-dark"></i>
                                                                </span>
                                                            </span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div><!--/b-btn-->
                                            
                                            <div class="divider-content"><span></span></div>
                                            
                                            <!--b-btn customize-->
                                            <h4>Customize & Colors</h4>
                                            <div class="shortcut-group">
                                                <ul class="b-btn-group">
                                                    <li>
                                                        <a href="#" class="b-btn grd-teal">
                                                            <span class="b-btn-slide-text color-white">3243</span>
                                                            <i class="img icofont-bar-chart color-silver helper-font-48"></i>
                                                            <span class="b-btn-icon-right">
                                                                <span>
                                                                    <i class="icofont-arrow-down helper-font-24 color-white"></i>
                                                                </span>
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="b-btn grd-orange">
                                                            <span class="b-btn-slide-text color-white">8765</span>
                                                            <i class="img icofont-plus-sign color-silver helper-font-48"></i>
                                                            <span class="b-btn-icon-right">
                                                                <span class="bg-black">
                                                                    <i class="icofont-arrow-down helper-font-24 color-orange"></i>
                                                                </span>
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="b-btn grd-black">
                                                            <span class="b-btn-slide-text color-white">1437</span>
                                                            <i class="img icofont-user-md color-silver helper-font-48"></i>
                                                            <span class="b-btn-icon-right">
                                                                <span>
                                                                    <i class="icofont-arrow-down helper-font-24 color-white"></i>
                                                                </span>
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="b-btn grd-red">
                                                            <span class="b-btn-slide-text color-white">$29,456</span>
                                                            <span class="img color-silver helper-font-48">$</span>
                                                            <span class="b-btn-icon-right">
                                                                <span class="bg-silver">
                                                                    <i class="icofont-arrow-down helper-font-24 color-red"></i>
                                                                </span>
                                                            </span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                            
                                            <div class="divider-content"><span></span></div>
                                            
                                            <div class="shortcut-group">
                                                <ul class="b-btn-group">
                                                    <li>
                                                        <a href="#" class="b-btn grd-sky">
                                                            <span class="b-btn-slide-text color-white">3243</span>
                                                            <i class="img icofont-bar-chart color-silver helper-font-48"></i>
                                                            <span class="b-btn-text helper-font-24 color-white"><small>Visitor stat &amp;</small> Hits</span> 
                                                            <span class="b-btn-icon-right">
                                                                <span>
                                                                    <i class="icofont-arrow-down helper-font-24 color-white"></i>
                                                                </span>
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="b-btn grd-green">
                                                            <span class="b-btn-slide-text color-white">3243</span>
                                                            <i class="img icofont-download-alt color-silver helper-font-48"></i>
                                                            <span class="b-btn-text helper-font-24 color-white"><small>Download this</small> Free</span> 
                                                            <span class="b-btn-icon-right">
                                                                <span>
                                                                    <i class="icofont-arrow-down helper-font-24 color-white"></i>
                                                                </span>
                                                            </span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#" class="b-btn grd-blue">
                                                            <span class="b-btn-slide-text color-white">3243</span>
                                                            <i class="img socialico-twitter-sign color-silver helper-font-48"></i>
                                                            <span class="b-btn-text helper-font-24 color-white"><small>Subscribe today</small> Follow</span> 
                                                            <span class="b-btn-icon-right">
                                                                <span>
                                                                    <i class="icofont-arrow-down helper-font-24 color-white"></i>
                                                                </span>
                                                            </span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div><!--/b-btn customize-->
                                            <!--/animate shortcut button-->
                                            
                                        </div><!--box body-->
                                    </div><!--/box-->
                                </div><!--/span-->
                            </div><!--/row-fluid-->
                            
                            
                            <!-- =========================================
                                            SLIDERS
                            =========================================== -->
                            <!--row-fluid-->
                            <div class="row-fluid">
                                <!--span-->
                                <div class="span12">
                                    <!--box-->
                                    <div class="box corner-all">
                                        <!--box header-->
                                        <div class="box-header grd-white color-silver-dark corner-top">
                                            <div class="header-control">
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close">&times;</a>
                                            </div>
                                            <span>Sliders</span>
                                        </div><!--/box header-->
                                        <!--box body-->
                                        <div class="box-body">
                                            <!--sliders-->
                                            <div class="row-fluid" style="margin-bottom: 20px;">
                                                <div class="span2">Simple slider:</div>
                                                <div class="span10">
                                                    <div id="slider-simple" class="slider-orange"></div>
                                                </div>
                                            </div>
                                            <div class="row-fluid" style="margin-bottom: 20px;">
                                                <div class="span2">Range slider:</div>
                                                <div class="span10">
                                                    <p>
                                                        <label for="amount-range" class="helper-font-small">Price range:</label>
                                                        <input type="text" id="amount-range" style="border: 0; color: #f6931f; font-weight: bold;" />
                                                    </p>
                                                    <div id="slider-range" class="slider-green"></div>
                                                </div>
                                            </div>
                                            <div class="row-fluid" style="margin-bottom: 20px;">
                                                <div class="span2">With minimum:</div>
                                                <div class="span10">
                                                    <p>
                                                        <label for="amount-min" class="helper-font-small">Minimum 10:</label>
                                                        <input type="text" id="amount-min" style="border: 0; color: #f6931f; font-weight: bold;" />
                                                    </p>
                                                    <div id="slider-min" class="slider-blue"></div>
                                                </div>
                                            </div>
                                            <div class="row-fluid" style="margin-bottom: 40px;">
                                                <div class="span2">With maximum:</div>
                                                <div class="span10">
                                                    <p>
                                                        <label for="amount-max" class="helper-font-small">Maximum 100:</label>
                                                        <input type="text" id="amount-max" style="border: 0; color: #f6931f; font-weight: bold;" />
                                                    </p>
                                                    <div id="slider-max" class="slider-orange"></div>
                                                </div>
                                            </div>
                                            <div class="row-fluid" style="margin-bottom: 20px;">
                                                <div class="span2">Vertical sliders:</div>
                                                <div class="span10">
                                                    <div class="slider-vertical slider-green" data-value="125"></div>
                                                    <div class="slider-vertical slider-blue" data-value="250"></div>
                                                    <div class="slider-vertical slider-red" data-value="175"></div>
                                                    <div class="slider-vertical slider-orange" data-value="250"></div>
                                                    <div class="slider-vertical slider-black" data-value="125"></div>
                                                </div>
                                            </div>
                                            <div class="row-fluid" style="margin-bottom: 20px;">
                                                <div class="span2">Available colors:</div>
                                                <div class="span10">
                                                    <label class="helper-font-small">slider-black</label>
                                                    <div style="margin: auto auto 20px auto;" class="demo-colors slider-black"></div>
                                                    
                                                    <label class="helper-font-small">slider-blue</label>
                                                    <div style="margin: auto auto 20px auto;" class="demo-colors slider-blue"></div>
                                                    
                                                    <label class="helper-font-small">slider-green</label>
                                                    <div style="margin: auto auto 20px auto;" class="demo-colors slider-green"></div>
                                                    
                                                    <label class="helper-font-small">slider-orange</label>
                                                    <div style="margin: auto auto 20px auto;" class="demo-colors slider-orange"></div>
                                                    
                                                    <label class="helper-font-small">slider-purple</label>
                                                    <div style="margin: auto auto 20px auto;" class="demo-colors slider-purple"></div>
                                                    
                                                    <label class="helper-font-small">slider-purple-dark</label>
                                                    <div style="margin: auto auto 20px auto;" class="demo-colors slider-purple-dark"></div>
                                                    
                                                    <label class="helper-font-small">slider-red</label>
                                                    <div style="margin: auto auto 20px auto;" class="demo-colors slider-red"></div>
                                                    
                                                    <label class="helper-font-small">slider-silver</label>
                                                    <div style="margin: auto auto 20px auto;" class="demo-colors slider-silver"></div>
                                                    
                                                    <label class="helper-font-small">slider-sky</label>
                                                    <div style="margin: auto auto 20px auto;" class="demo-colors slider-sky"></div>
                                                    
                                                    <label class="helper-font-small">slider-teal</label>
                                                    <div style="margin: auto auto 20px auto;" class="demo-colors slider-teal"></div>
                                                    
                                                    <label class="helper-font-small">slider-white</label>
                                                    <div style="margin: auto auto 20px auto;" class="demo-colors slider-white"></div>
                                                </div>
                                            </div>
                                            
                                            <!--/sliders-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            
                            <!-- =========================================
                                        PROGRESS BARS
                            =========================================== -->
                            <!--row-fluid-->
                            <div class="row-fluid">
                                <!--span-->
                                <div class="span12">
                                    <!--box-->
                                    <div class="box corner-all">
                                        <!--box header-->
                                        <div class="box-header grd-white color-silver-dark corner-top">
                                            <div class="header-control">
                                                <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                <a data-box="close">&times;</a>
                                            </div>
                                            <span>Progress Bars</span>
                                        </div><!--/box header-->
                                        <!--box body-->
                                        <div class="box-body">
                                            <!--Note-->
                                            <div class="alert">
                                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                                <strong>Note!</strong> Striped, animated, gloss, and stunning bars doesn't support in Internet Explorer.
                                            </div>

                                            <h4>Basic</h4>
                                            <div class="progress">
                                                <div class="bar" style="width: 60%;"></div>
                                            </div>
                                            <div class="progress">
                                                <div class="bar bar-success" style="width: 60%;"></div>
                                            </div>
                                            <div class="progress">
                                                <div class="bar bar-danger" style="width: 60%;"></div>
                                            </div>
                                            <div class="progress">
                                                <div class="bar bar-warning" style="width: 60%;"></div>
                                            </div>
                                            <h4>Striped</h4>
                                            <div class="progress progress-striped">
                                                <div class="bar" style="width: 60%;"></div>
                                            </div>
                                            <div class="progress progress-striped">
                                                <div class="bar bar-success" style="width: 60%;"></div>
                                            </div>
                                            <div class="progress progress-striped">
                                                <div class="bar bar-danger" style="width: 60%;"></div>
                                            </div>
                                            <div class="progress progress-striped">
                                                <div class="bar bar-warning" style="width: 60%;"></div>
                                            </div>
                                            <h4>Animated</h4>
                                            <div class="progress progress-striped active">
                                                <div class="bar" style="width: 60%;"></div>
                                            </div>
                                            <div class="progress progress-striped active">
                                                <div class="bar bar-success" style="width: 60%;"></div>
                                            </div>
                                            <div class="progress progress-striped active">
                                                <div class="bar bar-danger" style="width: 60%;"></div>
                                            </div>
                                            <div class="progress progress-striped active">
                                                <div class="bar bar-warning" style="width: 60%;"></div>
                                            </div>
                                            <h4>Stacked</h4>
                                            <div class="progress">
                                                <div class="bar bar-success" style="width: 35%;"></div>
                                                <div class="bar bar-warning" style="width: 20%;"></div>
                                                <div class="bar bar-danger" style="width: 10%;"></div>
                                            </div>

                                            <!--Note-->
                                            <div class="alert">
                                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                                <strong>Note!</strong> for stilearn and extra bar, You can use other colors on helper color (such as white, Win8, teal, etc.)
                                            </div>

                                            <h4>Stilear Bar</h4>
                                            <div class="bar-st">
                                                <span style="width: 60%;"></span>
                                            </div>
                                            <div class="bar-st green">
                                                <span style="width: 60%;"></span>
                                            </div>
                                            <div class="bar-st orange">
                                                <span style="width: 60%;"></span>
                                            </div>
                                            <div class="bar-st red">
                                                <span style="width: 60%;"></span>
                                            </div>
                                            <h4>Stilear Bar With Text</h4>
                                            <div class="bar-st">
                                                <p>70%</p>
                                                <span style="width: 70%;"></span>
                                            </div>
                                            <div class="bar-st green">
                                                <p class="color-white">70%</p>
                                                <span style="width: 70%;"></span>
                                            </div>
                                            <div class="bar-st orange">
                                                <p class="color-black">70%</p>
                                                <span style="width: 70%;"></span>
                                            </div>
                                            <div class="bar-st red">
                                                <p class="color-silver-dark">70%</p>
                                                <span style="width: 70%;"></span>
                                            </div>
                                            <h4>Stilear Bar Gradient</h4>
                                            <div class="bar-st bar-gradient">
                                                <span style="width: 50%;"></span>
                                            </div>
                                            <div class="bar-st bar-gradient green">
                                                <span style="width: 50%;"></span>
                                            </div>
                                            <div class="bar-st bar-gradient orange">
                                                <span style="width: 50%;"></span>
                                            </div>
                                            <div class="bar-st bar-gradient red">
                                                <span style="width: 50%;"></span>
                                            </div>
                                            <h4>Stilear Bar Gloss</h4>
                                            <div class="bar-st bar-gloss">
                                                <span style="width: 80%;"></span>
                                            </div>
                                            <div class="bar-st bar-gloss green">
                                                <span style="width: 80%;"></span>
                                            </div>
                                            <div class="bar-st bar-gloss orange">
                                                <span style="width: 80%;"></span>
                                            </div>
                                            <div class="bar-st bar-gloss red">
                                                <span style="width: 80%;"></span>
                                            </div>
                                            <h4>Stilear Bar Stripe</h4>
                                            <div class="bar-st bar-stripe">
                                                <span style="width: 75%;"></span>
                                            </div>
                                            <div class="bar-st bar-stripe green">
                                                <span style="width: 75%;"></span>
                                            </div>
                                            <div class="bar-st bar-stripe orange">
                                                <span style="width: 75%;"></span>
                                            </div>
                                            <div class="bar-st bar-stripe red">
                                                <span style="width: 75%;"></span>
                                            </div>
                                            <h4>Stilear Bar Animated Stripe</h4>
                                            <div class="bar-st bar-stripe">
                                                <span class="active" style="width: 60%;"></span>
                                            </div>
                                            <div class="bar-st bar-stripe green">
                                                <span class="active" style="width: 60%;"></span>
                                            </div>
                                            <div class="bar-st bar-stripe orange">
                                                <span class="active" style="width: 60%;"></span>
                                            </div>
                                            <div class="bar-st bar-stripe red">
                                                <span class="active" style="width: 60%;"></span>
                                            </div>
                                            <h4>Extra Bar Stunning</h4>
                                            <div class="bar-st bar-ext-stuning">
                                                <span style="width: 90%;"></span>
                                            </div>
                                            <div class="bar-st bar-ext-stuning green">
                                                <span style="width: 90%;"></span>
                                            </div>
                                            <div class="bar-st bar-ext-stuning orange">
                                                <span style="width: 90%;"></span>
                                            </div>
                                            <div class="bar-st bar-ext-stuning red">
                                                <span style="width: 90%;"></span>
                                            </div>
                                            <h4>Extra Bar 3D Rotate</h4>
                                            <div class="bar-st bar-ext-rotate">
                                                <span class="active" style="width: 90%;"></span>
                                            </div>
                                            <div class="bar-st bar-ext-rotate green">
                                                <span class="active" style="width: 90%;"></span>
                                            </div>
                                            <div class="bar-st bar-ext-rotate orange">
                                                <span class="active" style="width: 90%;"></span>
                                            </div>
                                            <div class="bar-st bar-ext-rotate red">
                                                <span class="active" style="width: 90%;"></span>
                                            </div>
                                        </div><!--/box body-->
                                    </div><!--/box-->
                                </div><!--/span-->
                            </div><!--/row-fluid-->

                            
                            <!-- =========================================
                                            LABELS & BADGES
                            =========================================== -->
                            <div class="box corner-all">
                                <div class="box-header grd-white color-silver-dark corner-top">
                                    <div class="header-control">
                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                        <a data-box="close">&times;</a>
                                    </div>
                                    <span>Labels and badges</span>
                                </div>
                                <div class="box-body">
                                    <!--label-->
                                    <h3>Labels</h3>
                                    <table class="table table-bordered table-striped responsive">
                                        <thead>
                                            <tr>
                                                <th>Labels</th>
                                                <th>Markup</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <span class="label">Default</span>
                                                </td>
                                                <td>
                                                    <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="label label-success">Success</span>
                                                </td>
                                                <td>
                                                    <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="label label-warning">Warning</span>
                                                </td>
                                                <td>
                                                    <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="label label-important">Important</span>
                                                </td>
                                                <td>
                                                    <code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="label label-info">Info</span>
                                                </td>
                                                <td>
                                                    <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="label label-inverse">Inverse</span>
                                                </td>
                                                <td>
                                                    <code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table><!--/label-->
                                    <!--badges-->
                                    <h3>Badges</h3>
                                    <table class="table table-bordered table-striped responsive">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Example</th>
                                                <th>Markup</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    Default
                                                </td>
                                                <td>
                                                    <span class="badge">1</span>
                                                </td>
                                                <td>
                                                    <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Success
                                                </td>
                                                <td>
                                                    <span class="badge badge-success">2</span>
                                                </td>
                                                <td>
                                                    <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Warning
                                                </td>
                                                <td>
                                                    <span class="badge badge-warning">4</span>
                                                </td>
                                                <td>
                                                    <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Important
                                                </td>
                                                <td>
                                                    <span class="badge badge-important">6</span>
                                                </td>
                                                <td>
                                                    <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Info
                                                </td>
                                                <td>
                                                    <span class="badge badge-info">8</span>
                                                </td>
                                                <td>
                                                    <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Inverse
                                                </td>
                                                <td>
                                                    <span class="badge badge-inverse">10</span>
                                                </td>
                                                <td>
                                                    <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table><!--/badges-->
                                </div>
                            </div>
                            
                            <div class="row-fluid">
                                <!-- ====================================================
                                            MODAL, PAGINATION, TOOLTIP & POPOVER
                                ========================================================= -->
                                <div class="span6">
                                    <!-- =========================================
                                                        MODAL
                                    =========================================== -->
                                    <!--row-fluid-->
                                    <div class="row-fluid">
                                        <!--span-->
                                        <div class="span12">
                                            <!--box-->
                                            <div class="box corner-all">
                                                <!--box header-->
                                                <div class="box-header grd-white color-silver-dark corner-top">
                                                    <div class="header-control">
                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                        <a data-box="close">&times;</a>
                                                    </div>
                                                    <span>Modal</span>
                                                </div><!--/box header-->
                                                <!--box body-->
                                                <div class="box-body">
                                                    <!-- Button to trigger modal -->
                                                    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
                                                
                                                    <!-- Modal -->
                                                    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                            <h3 id="myModalLabel">Modal header</h3>
                                                        </div>
                                                        <div class="modal-body">
                                                            <p>One fine body…</p>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                                                            <button class="btn btn-primary">Save changes</button>
                                                        </div>
                                                    </div>
                                                </div><!--/box body-->
                                            </div><!--/box-->
                                        </div><!--/span-->
                                    </div><!--/row-fluid-->
                                    
                                    
                                    <!-- =========================================
                                                TOOLTIP & POPOVER
                                    =========================================== -->
                                    <!--row-fluid-->
                                    <div class="row-fluid">
                                        <!--span-->
                                        <div class="span12">
                                            <!--box-->
                                            <div class="box corner-all">
                                                <!--box header-->
                                                <div class="box-header grd-white color-silver-dark corner-top">
                                                    <div class="header-control">
                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                        <a data-box="close">&times;</a>
                                                    </div>
                                                    <span>Tooltip & Popover</span>
                                                </div><!--/box header-->
                                                <!--box body-->
                                                <div class="box-body">
                                                    <!--tooltip-->
                                                    <div class="tooltip-demo">
                                                        <a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top |</a>
                                                        <a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right |</a>
                                                        <a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom |</a>
                                                        <a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a>
                                                    </div><!--/tooltip-->
                                                    
                                                    <!--popover-->
                                                    <div class="popover-demo">
                                                        <a href="#" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top |</a>
                                                        <a href="#" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right |</a>
                                                        <a href="#" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom |</a>
                                                        <a href="#" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a>
                                                    </div><!--/popover-->
                                                </div><!--/box body-->
                                            </div><!--/box-->
                                        </div><!--/span-->
                                    </div><!--/row-fluid-->
                                    
                                    
                                    <!-- =========================================
                                                    NOTIFICATION
                                    =========================================== -->
                                    <!--row-fluid-->
                                    <div class="row-fluid">
                                        <!--span-->
                                        <div class="span12">
                                            <!--box-->
                                            <div class="box corner-all">
                                                <!--box header-->
                                                <div class="box-header grd-white color-silver-dark corner-top">
                                                    <div class="header-control">
                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                        <a data-box="close">&times;</a>
                                                    </div>
                                                    <span>Notification</span>
                                                </div><!--/box header-->
                                                <!--box body-->
                                                <div class="box-body">
                                                    <h3>Basic</h3>
                                                    <div class="btn-group">
                                                        <button id="regular-notice" class="btn btn-mini">Regular</button>
                                                        <button id="sticky-notice" class="btn btn-mini">Sticky</button>
                                                        <button id="transparent-notice" class="btn btn-mini">Transparance</button>
                                                    </div><br /><br />
                                                    <div class="btn-group">
                                                        <button id="noshadow-notice" class="btn btn-mini">No Shadow</button>
                                                        <button id="icon-notice" class="btn btn-mini">Custom Icon</button>
                                                        <button id="bootstrap-icon-notice" class="btn btn-mini">Bootstrap Icon</button>
                                                    </div>
                                                    
                                                    <h3>Custom</h3>
                                                    <div class="btn-group">
                                                        <button id="dyn-notice" class="btn btn-mini">Dynamic Loader</button>
                                                        <button id="nonblocking-notice" class="btn btn-mini">Non Blocking</button>
                                                    </div><br /><br />
                                                    <div class="btn-group">
                                                        <button id="style-notice" class="btn btn-mini">Custom Style</button>
                                                        <button id="click-notice" class="btn btn-mini">Click Notice</button>
                                                    </div>
                                                    
                                                    <h3>Stacks</h3>
                                                    <div class="btn-group">
                                                        <button id="tl-notice" class="btn btn-mini">Notice</button>
                                                        <button id="tl-info" class="btn btn-mini">Info</button>
                                                        <button id="tl-success" class="btn btn-mini">Success</button>
                                                        <button id="tl-error" class="btn btn-mini">Error</button>
                                                    </div>
                                                    <p class="muted">Top Left. Moves down, then right. Pushes to stack top.</p>
                                                    
                                                    <div class="btn-group">
                                                        <button id="bl-notice" class="btn btn-mini">Notice</button>
                                                        <button id="bl-info" class="btn btn-mini">Info</button>
                                                        <button id="bl-success" class="btn btn-mini">Success</button>
                                                        <button id="bl-error" class="btn btn-mini">Error</button>
                                                    </div>
                                                    <p class="muted">Bottom Left. Moves right, then up. Pushes to stack top.</p>
                                                    
                                                    <div class="btn-group">
                                                        <button id="br-notice" class="btn btn-mini">Notice</button>
                                                        <button id="br-info" class="btn btn-mini">Info</button>
                                                        <button id="br-success" class="btn btn-mini">Success</button>
                                                        <button id="br-error" class="btn btn-mini">Error</button>
                                                    </div>
                                                    <p class="muted">Bottom Right. Moves up, then left. Pushes to stack bottom.</p>
                                                    
                                                    <div class="btn-group">
                                                        <button id="cr-notice" class="btn btn-mini">Notice</button>
                                                        <button id="cr-info" class="btn btn-mini">Info</button>
                                                        <button id="cr-success" class="btn btn-mini">Success</button>
                                                        <button id="cr-error" class="btn btn-mini">Error</button>
                                                    </div>
                                                    <p class="muted">Custom. Moves right, then down. Pushes to stack bottom.</p>
                                                    
                                                    <div class="btn-group">
                                                        <button id="cl-notice" class="btn btn-mini">Notice</button>
                                                        <button id="cl-info" class="btn btn-mini">Info</button>
                                                        <button id="cl-success" class="btn btn-mini">Success</button>
                                                        <button id="cl-error" class="btn btn-mini">Error</button>
                                                    </div>
                                                    <p class="muted">Custom. Moves left, then up. Pushes to stack top.</p>
                                                    
                                                    <div class="btn-group">
                                                        <button id="top-notice" class="btn btn-mini">Notice</button>
                                                        <button id="top-info" class="btn btn-mini">Info</button>
                                                        <button id="top-success" class="btn btn-mini">Success</button>
                                                        <button id="top-error" class="btn btn-mini">Error</button>
                                                    </div>
                                                    <p class="muted">Top bar style. (Like Old Microsoft Notification Bars.) Moves down, then right. Pushes to stack top.</p>
                                                    
                                                    <div class="btn-group">
                                                        <button id="bottom-notice" class="btn btn-mini">Notice</button>
                                                        <button id="bottom-info" class="btn btn-mini">Info</button>
                                                        <button id="bottom-success" class="btn btn-mini">Success</button>
                                                        <button id="bottom-error" class="btn btn-mini">Error</button>
                                                    </div>
                                                    <p class="muted">Bottom bar style. (Like New Microsoft Notification Bars.) Moves up, then right. Pushes to stack bottom.</p>
                                                </div><!--/box body-->
                                            </div><!--/box-->
                                        </div><!--/span-->
                                    </div><!--/row-fluid-->
                                    
                                </div><!--/span6-->
                                
                                <!-- ====================================================================
                                                    LABELS & BADGES, ALERT
                                ========================================================================= -->
                                <!--span6-->
                                <div class="span6">
                                    <!-- =========================================
                                                        ALERT
                                    =========================================== -->
                                    <!--row-fluid-->
                                    <div class="row-fluid">
                                        <!--span-->
                                        <div class="span12">
                                            <!--box-->
                                            <div class="box corner-all">
                                                <!--box header-->
                                                <div class="box-header grd-white color-silver-dark corner-top">
                                                    <div class="header-control">
                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                        <a data-box="close">&times;</a>
                                                    </div>
                                                    <span>Alert</span>
                                                </div><!--/box header-->
                                                <!--box body-->
                                                <div class="box-body">
                                                    <!--default-->
                                                    <div class="alert">
                                                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                                                        <strong>Warning!</strong> Best check yo self, you're not looking too good.
                                                    </div>
                                                    <!--Error or danger-->
                                                    <div class="alert alert-error">
                                                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                                                        <strong>Oh snap!</strong> Change a few things up and try submitting again.
                                                    </div>
                                                    <!--Success-->
                                                    <div class="alert alert-success">
                                                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                                                        <strong>Well done!</strong> You successfully read this important alert message.
                                                    </div>
                                                    <!--Information-->
                                                    <div class="alert alert-info">
                                                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                                                        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                                                    </div>
                                                    
                                                </div><!--/box body-->
                                            </div><!--/box-->
                                        </div><!--/span-->
                                    </div><!--/row-fluid-->
                                    
                                    <!-- =========================================
                                                        PAGINATION
                                    =========================================== -->
                                    <!--row-fluid-->
                                    <div class="row-fluid">
                                        <!--span-->
                                        <div class="span12">
                                            <!--box-->
                                            <div class="box corner-all">
                                                <!--box header-->
                                                <div class="box-header grd-white color-silver-dark corner-top">
                                                    <div class="header-control">
                                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                                        <a data-box="close">&times;</a>
                                                    </div>
                                                    <span>Pagination</span>
                                                </div><!--/box header-->
                                                <!--box body-->
                                                <div class="box-body">
                                                    <!--pagination-->
                                                    <h4>Size</h4>
                                                    <div class="pagination pagination-large">
                                                        <ul>
                                                            <li class="disabled"><a href="#">Prev</a></li>
                                                            <li class="active"><a href="#">1</a></li>
                                                            <li><a href="#">2</a></li>
                                                            <li><a href="#">3</a></li>
                                                            <li><a href="#">4</a></li>
                                                            <li><a href="#">Next</a></li>
                                                        </ul>
                                                    </div>
                                                    <div class="pagination">
                                                        <ul>
                                                            <li class="disabled"><a href="#">Prev</a></li>
                                                            <li class="active"><a href="#">1</a></li>
                                                            <li><a href="#">2</a></li>
                                                            <li><a href="#">3</a></li>
                                                            <li><a href="#">4</a></li>
                                                            <li><a href="#">Next</a></li>
                                                        </ul>
                                                    </div>
                                                    <div class="pagination pagination-small">
                                                        <ul>
                                                            <li class="disabled"><a href="#">Prev</a></li>
                                                            <li class="active"><a href="#">1</a></li>
                                                            <li><a href="#">2</a></li>
                                                            <li><a href="#">3</a></li>
                                                            <li><a href="#">4</a></li>
                                                            <li><a href="#">Next</a></li>
                                                        </ul>
                                                    </div>
                                                    <div class="pagination pagination-mini">
                                                        <ul>
                                                            <li class="disabled"><a href="#">Prev</a></li>
                                                            <li class="active"><a href="#">1</a></li>
                                                            <li><a href="#">2</a></li>
                                                            <li><a href="#">3</a></li>
                                                            <li><a href="#">4</a></li>
                                                            <li><a href="#">Next</a></li>
                                                        </ul>
                                                    </div>
                                                    <h4>Centered</h4>
                                                    <div class="pagination pagination-centered">
                                                        <ul>
                                                            <li class="disabled"><a href="#">Prev</a></li>
                                                            <li class="active"><a href="#">1</a></li>
                                                            <li><a href="#">2</a></li>
                                                            <li><a href="#">3</a></li>
                                                            <li><a href="#">4</a></li>
                                                            <li><a href="#">Next</a></li>
                                                        </ul>
                                                    </div>
                                                    <h4>Right</h4>
                                                    <div class="pagination pagination-right">
                                                        <ul>
                                                            <li class="disabled"><a href="#">Prev</a></li>
                                                            <li class="active"><a href="#">1</a></li>
                                                            <li><a href="#">2</a></li>
                                                            <li><a href="#">3</a></li>
                                                            <li><a href="#">4</a></li>
                                                            <li><a href="#">Next</a></li>
                                                        </ul>
                                                    </div>
                                                    <h4>Pager</h4>
                                                    <ul class="pager">
                                                        <li><a href="#">Prev</a></li>
                                                        <li><a href="#">Next</a></li>
                                                    </ul>
                                                    <ul class="pager">
                                                        <li class="previous disabled">
                                                            <a href="#">&larr; Older</a>
                                                        </li>
                                                        <li class="next">
                                                            <a href="#">Newer &rarr;</a>
                                                        </li>
                                                    </ul><!--/pagination-->
                                                </div><!--/box body-->
                                            </div><!--/box-->
                                        </div><!--/span-->
                                    </div><!--/row-fluid-->
                                    
                                </div><!--/span6-->
                            </div><!--/row-fluid-->
                            
                            
                            <!-- =========================================
                                                NAVBAR
                            =========================================== -->
                            <div class="box corner-all">
                                <div class="box-header grd-white color-silver-dark corner-top">
                                    <div class="header-control">
                                        <a data-box="collapse"><i class="icofont-caret-up"></i></a>
                                        <a data-box="close">&times;</a>
                                    </div>
                                    <span>Navbar</span>
                                </div>
                                <div class="box-body">
                                    <!--navbar default-->
                                    <div class="page-header">
                                        <h4>Navbar Default</h4>
                                    </div>
                                    <div class="navbar">
                                        <div class="navbar-inner">
                                            <div class="container">
                                                <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                                                    <span class="icon-bar"></span>
                                                    <span class="icon-bar"></span>
                                                    <span class="icon-bar"></span>
                                                </a>
                                                <a class="brand" href="#">Title</a>
                                                <div class="nav-collapse collapse navbar-responsive-collapse">
                                                    <ul class="nav">
                                                        <li class="active"><a href="#">Home</a></li>
                                                        <li><a href="#">Link</a></li>
                                                        <li><a href="#">Link</a></li>
                                                        <li class="dropdown">
                                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                                            <ul class="dropdown-menu">
                                                                <li><a href="#">Action</a></li>
                                                                <li><a href="#">Another action</a></li>
                                                                <li><a href="#">Something else here</a></li>
                                                                <li class="divider"></li>
                                                                <li class="nav-header">Nav header</li>
                                                                <li><a href="#">Separated link</a></li>
                                                                <li><a href="#">One more separated link</a></li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                    <form class="navbar-search pull-left" action="#">
                                                        <input type="text" class="search-query input-large" placeholder="Search">
                                                    </form>
                                                    <ul class="nav pull-right">
                                                        <li><a href="#">Link</a></li>
                                                        <li class="divider-vertical"></li>
                                                        <li class="dropdown">
                                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                                            <ul class="dropdown-menu">
                                                                <li><a href="#">Action</a></li>
                                                                <li><a href="#">Another action</a></li>
                                                                <li><a href="#">Something else here</a></li>
                                                                <li class="divider"></li>
                                                                <li><a href="#">Separated link</a></li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </div><!-- /.nav-collapse -->
                                            </div>
                                        </div><!-- /navbar-inner -->
                                    </div><!-- /navbar default -->
                                    
                                    <!--navbar inverse-->
                                    <div class="page-header">
                                        <h4>Navbar Inverse</h4>
                                    </div>
                                    <div class="navbar navbar-inverse">
                                        <div class="navbar-inner">
                                            <div class="container">
                                                <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                                                    <span class="icon-bar"></span>
                                                    <span class="icon-bar"></span>
                                                    <span class="icon-bar"></span>
                                                </a>
                                                <a class="brand" href="#">Title</a>
                                                <div class="nav-collapse collapse navbar-responsive-collapse">
                                                    <ul class="nav">
                                                        <li class="active"><a href="#">Home</a></li>
                                                        <li><a href="#">Link</a></li>
                                                        <li><a href="#">Link</a></li>
                                                        <li class="dropdown">
                                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                                            <ul class="dropdown-menu">
                                                                <li><a href="#">Action</a></li>
                                                                <li><a href="#">Another action</a></li>
                                                                <li><a href="#">Something else here</a></li>
                                                                <li class="divider"></li>
                                                                <li class="nav-header">Nav header</li>
                                                                <li><a href="#">Separated link</a></li>
                                                                <li><a href="#">One more separated link</a></li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                    <form class="navbar-search pull-left" action="#">
                                                        <input type="text" class="search-query input-large" placeholder="Search">
                                                    </form>
                                                    <ul class="nav pull-right">
                                                        <li><a href="#">Link</a></li>
                                                        <li class="divider-vertical"></li>
                                                        <li class="dropdown">
                                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                                            <ul class="dropdown-menu">
                                                                <li><a href="#">Action</a></li>
                                                                <li><a href="#">Another action</a></li>
                                                                <li><a href="#">Something else here</a></li>
                                                                <li class="divider"></li>
                                                                <li><a href="#">Separated link</a></li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </div><!-- /.nav-collapse -->
                                            </div>
                                        </div><!-- /navbar-inner -->
                                    </div><!-- /navbar inverse -->
                                    
                                </div><!-- /box-body -->
                            </div><!-- /box -->
                            
                            
                            
                            <!--/interface-->
                        </div><!--/content-body -->
                    </div><!-- /content -->
                </div><!-- /span content -->

                <!-- span side-right -->
                <div class="span2">
                    <!-- side-right -->
                    <aside class="side-right">
                        <!-- sidebar-right -->
                        <div class="sidebar-right">
                            <!--sidebar-right-header-->
                            <div class="sidebar-right-header">
                                <div class="sr-header-right">
                                    <h2><span class="label label-info">$26,875</span></h2>
                                </div>
                                <div class="sr-header-left">
                                    <p class="bold">Balance</p>
                                    <small class="muted">Dec 30 2012</small>
                                </div>
                            </div><!--/sidebar-right-header-->
                            <!--sidebar-right-control-->
                            <div class="sidebar-right-control">
                                <ul class="sr-control-item">
                                    <li class="active"><a href="#alt1" data-toggle="tab" title="alternative 1"><i class="icofont-tasks"></i></a></li>
                                    <li><a href="#alt2" data-toggle="tab" title="alternative 2"><i class="icofont-fullscreen"></i></a></li>
                                    <li rel="tooltip-bottom" title="view site"><a href="index.html" target="_BLANK"><i class="icofont-external-link"></i></a></li>
                                </ul>
                            </div><!-- /sidebar-right-control-->
                            <!-- sidebar-right-content -->
                            <div class="sidebar-right-content">
                                <div class="tab-content">
                                    <!--alternate 1-->
                                    <div class="tab-pane fade active in" id="alt1">
                                        <div class="divider-content"><span></span></div>
                                        
                                        <div class="side-nav">
                                            <ul class="nav-side">
                                                <li class="active">
                                                    <a href="403.html">
                                                        <i class="icofont-random"></i>
                                                        <span>Error 403</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="404.html">
                                                        <i class="icofont-random"></i>
                                                        <span>Error 404</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="405.html">
                                                        <i class="icofont-random"></i>
                                                        <span>Error 405</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="500.html">
                                                        <i class="icofont-random"></i>
                                                        <span>Error 500</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="503.html">
                                                        <i class="icofont-random"></i>
                                                        <span>Error 503</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="under-construction.html">
                                                        <i class="icofont-random"></i>
                                                        <span>Under Construction</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="coming-son.html">
                                                        <i class="icofont-random"></i>
                                                        <span>Coming son</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        
                                        <div class="divider-content"><span></span></div>
                                        
                                        <div class="side-box">
                                            <div class="bar-st bar-mini green">
                                                <span style="width: 70%;"></span>
                                                <p class="color-white">70%</p>
                                            </div>
                                            <div rel="tooltip" title="60%" class="progress progress-mini">
                                                <span class="bar" style="width: 60%;"></span>
<!--                                                <p class="color-white">60%</p>-->
                                            </div>
                                            <div rel="tooltip" title="60%" class="progress progress-mini">
                                                <span class="bar bar-success" style="width: 60%;"></span>
                                            </div>
                                            <div rel="tooltip" title="60%" class="progress progress-mini">
                                                <span class="bar bar-danger" style="width: 60%;"></span>
                                            </div>
                                            <div rel="tooltip" title="60%" class="progress progress-mini">
                                                <span class="bar bar-warning" style="width: 60%;"></span>
                                            </div>
                                        </div>
                                        
                                        <div class="divider-content"><span></span></div>
                                        
                                    </div><!--/alternative 1-->
                                    
                                    <!--alternative 2-->
                                    <div class="tab-pane fade" id="alt2">
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                        
                                        <div class="side-box">
                                            <div data-side="slider" class="slider-green" data-value="125"></div>
                                            <div data-side="slider" class="slider-blue" data-value="250"></div>
                                            <div data-side="slider" class="slider-red" data-value="175"></div>
                                            <div data-side="slider" class="slider-orange" data-value="250"></div>
                                            <div data-side="slider" class="slider-black" data-value="125"></div>
                                            <div data-side="slider" class="slider-teal" data-value="275"></div>
                                        </div>
                                        
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                        
                                        <div class="side-box">
                                            <div data-side="slider-vertical" class="slider-green" data-value="125"></div>
                                            <div data-side="slider-vertical" class="slider-blue" data-value="250"></div>
                                            <div data-side="slider-vertical" class="slider-red" data-value="175"></div>
                                            <div data-side="slider-vertical" class="slider-orange" data-value="250"></div>
                                            <div data-side="slider-vertical" class="slider-black" data-value="125"></div>
                                            <div data-side="slider-vertical" class="slider-teal" data-value="275"></div>
                                        </div>
                                        
                                        <div class="divider-content"><span></span></div> <!--divider-->
                                    </div><!--/alternative 2-->
                                    
                                </div>
                            </div><!-- /sidebar-right-content -->
                        </div><!-- /sidebar-right -->
                    </aside><!-- /side-right -->
                </div><!-- /span side-right -->
            </div>
        </section>

        <!-- section footer -->
        <footer>
            <a rel="to-top" href="#top"><i class="icofont-circle-arrow-up"></i></a>
        </footer>

        <!-- javascript
        ================================================== -->
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        <script src="js/jquery.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
        <script src="js/jquery-ui.min.js"></script> <!-- this for sliders-->
        <script src="js/bootstrap.min.js"></script>
        <script src="js/uniform/jquery.uniform.js"></script>
        
        <script src="js/pnotify/jquery.pnotify.js"></script>
        <script src="js/pnotify/jquery.pnotify.demo.js"></script>
        <script src="js/responsive-tables/responsive-tables.js"></script>

        <!-- required stilearn template js, for full feature-->
        <script src="js/holder.js"></script>
        <script src="js/stilearn-base.js"></script>

        <script type="text/javascript">
            
            $(document).ready(function() {
                // try your code here..
                
                // uniform
                $('[data-form=uniform]').uniform();
                // tooltip demo
                $('.tooltip-demo').tooltip({
                    selector: "a[rel=tooltip]"
                }).css({'margin-bottom' : '20px'})
                // popover demo
                $("a[rel=popover]").popover().click(function(e) {
                    e.preventDefault()
                })
                
                // slider simple
                // this setting slider on sidebar right
                $('[data-side=slider]').slider({
                    orientation: "horizontal",
                    range: "min",
                    max: 300
                }).each(function(){
                    value = $(this).attr('data-value');

                    $(this).slider('value', value).css({
                        'margin-bottom' : '8px'
                    });
                });
                // this setting slider vertical on sidebar right
                $('[data-side=slider-vertical]').slider({
                    orientation: "vertical",
                    range: "min",
                    max: 300
                }).each(function(){
                    value = $(this).attr('data-value');

                    $(this).slider('value', value).css({
                        'display':'inline-block',
                        'margin-right' : '20px',
                        'height' : '200px'
                    });
                });
                
                // default slider
                $("#slider-simple").slider();

                // slider range
                $("#slider-range").slider({
                    range: true,
                    min: 0,
                    max: 500,
                    values: [ 75, 300 ],
                    slide: function( event, ui ) {
                        $( "#amount-range" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                    }
                });
                $( "#amount-range" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) );

                // slider with min
                $("#slider-min").slider({
                        range: "min",
                        value: 37,
                        min: 10,
                        max: 700,
                        slide: function( event, ui ) {
                            $( "#amount-min" ).val( "$" + ui.value );
                        }
                    });
                    $( "#amount-min" ).val( "$" + $( "#slider-min" ).slider( "value" ) );

                // slider with max
                $("#slider-max").slider({
                    range: "max",
                    min: 1,
                    max: 100,
                    value: 20,
                    slide: function( event, ui ) {
                        $( "#amount-max" ).val( ui.value );
                    }
                });
                $( "#amount-max" ).val( $( "#slider-max" ).slider( "value" ) );

                // slider vertical
                $('.slider-vertical').slider({
                    orientation: "vertical",
                    range: "min",
                    min: 1,
                    max: 250
                }).each(function(){
                    value = $(this).attr('data-value');

                    $(this).slider('value', value).css({
                        'display':'inline-block',
                        'margin-right' : '20px',
                        'height' : '200px'
                    });
                })

                // demo slider colors
                $('.demo-colors').slider({
                    range: true,
                    min: 0,
                    max: 500,
                    values: [ 75, 300 ]
                });
                
            });
      
        </script>
    </body>

<!-- Mirrored from stilearning.com/items/preview/stilearn-admin-template/interface.html by HTTrack Website Copier/3.x [XR&CO'2013], Wed, 01 May 2013 03:37:43 GMT -->
</html>
